<template>
  <div class="app-container app-container-next app-container-detail">
    <el-card class="box-card site" shadow="false">
      <div slot="header" class="clearfix">
        <router-link :to="{name: 'reviews-list'}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
      </div>
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-form ref="settingForm" :model="settings" label-width="800px" label-position="top">
            <h4 class="rebate-label">基础设置</h4>
            <el-form-item label="开启评论功能，网上店铺将展示评论相关信息。" prop="name">
              是否启用：
              <el-switch
                  v-model="settings.enable">
              </el-switch>
            </el-form-item>
            <el-form-item label="开启评论自动发布功能，顾客满足条件的评论无需审核，直接在网上店铺展示。" prop="name">
              自动发布：
              <el-switch
                  v-model="settings.autoPublish">
              </el-switch>
              <el-select v-model="settings.autoPublishLevel" style="width: 240px">
                <el-option value=1 label="1"></el-option>
                <el-option value=2 label="2"></el-option>
                <el-option value=3 label="3"></el-option>
                <el-option value=4 label="4"></el-option>
                <el-option value=5 label="5"></el-option>
              </el-select>
              星及以上评论
            </el-form-item>
            <el-form-item label="评论门槛(符合评论门槛的用户才能对商品进行评论)" prop="name">
              <el-radio-group v-model="settings.commentPermission">
                <el-radio label="purchased">成功下单</el-radio>
                <el-radio label="confirmed">下单后确认收货</el-radio>
                <el-radio label="anyone">无门槛</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="过滤关键词" prop="name">
              <template #label>过滤关键词  <el-tooltip class="item" effect="dark" placement="top" content="当评论中出现与过滤词一致的词语时，该评论将被过滤不进行导入">
                <i class="el-icon-question" style="margin-left: 10px"></i>
              </el-tooltip></template>
              <el-select
                  class="no-down"
                  :popper-append-to-body="false"
                  style="width: 400px"
                  v-model="settings.filterText"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请输入过滤关键词，多个用回车隔开">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <h4 class="rebate-label">展示设置</h4>
            <el-form-item label="商品评论" prop="name">
              <div>
                <p style="margin: 0">每页展示数量：</p>
                <el-select v-model="settings.commentNumber" style="width: 240px">
                  <el-option value=5></el-option>
                  <el-option value=10></el-option>
                  <el-option value=15></el-option>
                  <el-option value=20></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="商品评分(商品没有评论时自动隐藏评分星标)" prop="name">
              <div>
                <p style="margin: 0">评分显示位置(商品列表/商品详情)：</p>
                <el-select v-model="settings.starLocation" style="width: 240px">
                  <el-option value="belowTitle" label="商品标题下方"></el-option>
                  <el-option value="hide" label="隐藏"></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="是否显示评论时间" prop="name">
              是否启用：
              <el-switch
                  v-model="settings.showTime">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="submitLoading">保存</el-button>
              <el-button @click="handleReset">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

import {addReviewsSetting, getReviewsSetting} from '@/api/reviews';

export default {
    name: 'reviews-setting',
    data () {
        return {
            options: [],
            submitLoading: false,
            settings: {
                id: '',
                enable: false,
                autoPublish: false,
                autoPublishLevel: 5,
                commentNumber: 10,
                commentPermission: 'confirmed',
                filterText: [],
                starLocation: 'belowTitle'
            }
        };
    },
    methods: {
        getSiteReviewsSetting () {
            getReviewsSetting(this.siteId).then((res) => {
                if (res.data) {
                    this.settings = res.data;
                    if (this.settings.filterText) {
                        this.settings.filterText = this.settings.filterText.split(',');
                    }
                }
            });
        },
        handleSubmit () {
            this.submitLoading = true;
            this.settings.siteId = this.siteId;
            if (this.settings.filterText) {
                this.settings.filterText = this.settings.filterText.join(',');
            }
            addReviewsSetting(this.settings).then(res => {
                if (res.code === '200') {
                    this.submitLoading = false;
                    this.$message.success('保存成功');
                    this.$router.push({ name: 'reviews-list' });
                }
            }).catch(() => {
                this.submitLoading = false;
            });
        },
        handleReset () {
            this.$router.push({ name: 'reviews-list' });
        }
    },
    mounted () {
        this.getSiteReviewsSetting();
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style scoped lang="scss">
.no-down {
  ::v-deep .el-input__suffix {
    display: none;
  }

  ::v-deep .el-select-dropdown {
    display: none;
  }
}
</style>
